<template>
  <div>
    <el-form ref="registerForm" :model="registerDto" :rules="RegisterDto_Rules" auto-complete="on" label-position="left">
      <el-form-item prop="phoneNumber">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input v-model="registerDto.phoneNumber" :placeholder="$t('rules.userName')" name="phoneNumber" type="text" auto-complete="on" />
      </el-form-item>
      <el-form-item prop="code">
        <span class="icon iconfont verifyCode_icon">&#xe704;</span>
        <el-input v-model.trim="registerDto.code" class="verifycode_input" type="text" :placeholder="$t('rules.verifyCode')">
          <el-button v-if="!isSendMsg" slot="append" @click="sendPhoneNum">
            <span>{{ $t('register.sendMSG') }}</span>
          </el-button>
          <el-button v-else slot="append" class="noClick">
            <span>{{ reSendTime }}(s)</span>
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input ref="password" :key="passwordType" v-model="registerDto.password" :type="passwordType" :placeholder="$t('rules.passWord')" name="password" tabindex="2" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
    </el-form>
    <slot name="REPASSWORD" />
    <slot name="REGISTER" />
  </div>
</template>
<script>
import { RegisterDto_Rules } from '@/lib/validate/register/index.js';
import { RegisterUserInput } from '@/lib/form/swaggerForm.js';
import { api_POST_UsersRegisterSmsCode } from '@/extend/api/platform/register';
export default {
  name: 'Register',
  data() {
    return {
      RegisterDto_Rules: new RegisterDto_Rules(),
      registerDto: new RegisterUserInput(),
      passwordType: 'password',
      repasswordType: 'repassword',
      loading: false,
      isSendMsg: false, // 是否已经发送验证码
      reSendTime: 0 // 验证码倒计时
    };
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    routerRedirect(path) {
      this.$router.push({
        path: path
      });
    },
    // 发送手机验证码
    sendPhoneNum() {
      // 校验phoneNumber的值是否有效
      this.$refs.registerForm.validateField('phoneNumber', phoneError => {
        if (!phoneError) {
          // phoneNumber手机号码本地校验已通过
          api_POST_UsersRegisterSmsCode({
            phoneNumber: this.registerDto.phoneNumber,
            isNew: true
          }).then(res => {
            if (res.result === 'Success') {
              this.$message({ type: 'success', message: '手机验证码已发送' });
              // 同时执行倒计时
              this.countDownTime(60);
            } else if (res.result === 'AlreadyExists') {
              this.$message({ type: 'warning', message: '用户已经存在' });
            } else if (res.result === 'InvalidVerificationCode') {
              this.$message({ type: 'warning', message: '无效的验证码' });
              // 同时执行倒计时
              this.countDownTime(60);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 短信倒计时
    countDownTime(num) {
      let timer = null;
      clearInterval(timer);
      this.isSendMsg = true;
      this.reSendTime = num;
      timer = setInterval(() => {
        this.isSendMsg = true;
        this.reSendTime -= 1;
        if (this.reSendTime <= 0) {
          clearInterval(timer);
          this.isSendMsg = false;
        }
      }, 1000);
    }
  }
};
</script>
<style lang="scss">
.permission-container .el-input.verifycode_input {
  width: 100%;
  display: table;
  padding-left: 30px;
  height: 40px;
  .el-button {
    width: 115px;
    height: 40px;
  }
  .el-button.noClick {
    cursor: auto;
  }
}
.verifyCode_icon {
  padding: 1px 5px 5px 14px;
  color: #889aa4;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
  position: absolute;
}
</style>
